<template>
  <div class="member-center-page">
    <!-- 会员中心头部 -->
    <div class="member-header">
      <div class="header-bg">
        <img src="@/assets/pixel-pets.png" alt="会员中心背景" class="bg-image" />
        <div class="header-overlay"></div>
      </div>
      
      <div class="member-info">
        <div class="member-avatar">
          <img :src="userAvatar" alt="用户头像" />
          <div class="vip-badge" v-if="isVip">
            <span class="vip-text">VIP</span>
          </div>
        </div>
        
        <div class="member-details">
          <h1>{{ userName }}</h1>
          <div class="member-level">
            <span class="level-text">会员等级：</span>
            <span class="level-value">{{ memberLevel }}</span>
          </div>
          <div class="membership-status">
            <span class="status-text">会员有效期至：</span>
            <span class="status-value">{{ membershipExpiry }}</span>
          </div>
        </div>
        
        <div class="member-stats">
          <div class="stat-item">
            <span class="stat-value">{{ petsCount }}</span>
            <span class="stat-label">我的宠物</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ favoriteCount }}</span>
            <span class="stat-label">我的收藏</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ points }}</span>
            <span class="stat-label">宠币</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 导航标签 -->
    <div class="member-nav">
      <div class="nav-container">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          :class="['nav-tab', { active: activeTab === tab.id }]"
          @click="activeTab = tab.id"
        >
          {{ tab.name }}
        </button>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="member-content">
      <div class="content-container">
        <!-- 会员权益 -->
        <div v-if="activeTab === 'benefits'" class="benefits-section">
          <h2>会员专享权益</h2>
          
          <div class="benefits-grid">
            <div class="benefit-card">
              <div class="benefit-icon">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="benefit-info">
                <h3>免费医疗咨询</h3>
                <p>专业兽医在线咨询，为您的宠物健康保驾护航</p>
              </div>
            </div>
            
            <div class="benefit-card">
              <div class="benefit-icon">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM13 7H11V13H13V7ZM13 17H11V15H13V17Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="benefit-info">
                <h3>专属折扣</h3>
                <p>宠物用品、食品和服务享受会员专享折扣</p>
              </div>
            </div>
            
            <div class="benefit-card">
              <div class="benefit-icon">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM7 12H11V14H7V12ZM13 12H17V14H13V12ZM7 8H17V10H7V8Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="benefit-info">
                <h3>专属活动</h3>
                <p>优先参与宠物主题线下活动和会员聚会</p>
              </div>
            </div>
            
            <div class="benefit-card">
              <div class="benefit-icon">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM5 19V5H19V19H5ZM15.5 13C16.6 13 17.5 12.1 17.5 11C17.5 9.9 16.6 9 15.5 9C14.4 9 13.5 9.9 13.5 11C13.5 12.1 14.4 13 15.5 13ZM8.5 13C9.6 13 10.5 12.1 10.5 11C10.5 9.9 9.6 9 8.5 9C7.4 9 6.5 9.9 6.5 11C6.5 12.1 7.4 13 8.5 13ZM12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17ZM12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="benefit-info">
                <h3>宠物档案管理</h3>
                <p>创建和管理宠物的电子健康档案和成长记录</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 个人收藏 -->
        <div v-if="activeTab === 'favorites'" class="favorites-section">
          <div class="section-header">
            <h2>我的收藏</h2>
            <span class="collection-count">共 {{ favorites.length }} 件收藏</span>
          </div>
          
          <div class="favorites-grid">
            <div v-for="favorite in favorites" :key="favorite.id" class="favorite-card">
              <div class="favorite-image">
                <img :src="favorite.image" :alt="favorite.name" />
                <button class="remove-favorite" @click="removeFavorite(favorite.id)">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/>
                  </svg>
                </button>
              </div>
              <div class="favorite-info">
                <h3>{{ favorite.name }}</h3>
                <p class="favorite-description">{{ favorite.description }}</p>
                <button class="view-detail" @click="viewFavoriteDetail(favorite.id, favorite.type)">
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 订单记录 -->
        <div v-if="activeTab === 'orders'" class="orders-section">
          <div class="section-header">
            <h2>我的订单</h2>
            <div class="order-filters">
              <button 
                v-for="filter in orderFilters" 
                :key="filter.id"
                :class="['filter-btn', { active: activeOrderFilter === filter.id }]"
                @click="activeOrderFilter = filter.id"
              >
                {{ filter.name }}
              </button>
            </div>
          </div>
          
          <div class="orders-list">
            <div v-for="order in filteredOrders" :key="order.id" class="order-card">
              <div class="order-header">
                <div class="order-info">
                  <span class="order-number">订单号：{{ order.id }}</span>
                  <span class="order-date">下单时间：{{ order.date }}</span>
                </div>
                <span class="order-status" :class="order.status.toLowerCase()">
                  {{ order.status }}
                </span>
              </div>
              <div class="order-items">
                <div v-for="item in order.items" :key="item.id" class="order-item">
                  <img :src="item.image" :alt="item.name" class="item-image" />
                  <div class="item-info">
                    <h4>{{ item.name }}</h4>
                    <span class="item-price">¥{{ item.price }}</span>
                    <span class="item-quantity">x{{ item.quantity }}</span>
                  </div>
                </div>
              </div>
              <div class="order-footer">
                <span class="order-total">共 {{ order.totalItems }} 件商品 合计：¥{{ order.totalPrice }}</span>
                <div class="order-actions">
                  <button v-if="order.status === '待付款'" class="pay-btn">立即付款</button>
                  <button v-if="order.status === '待发货'" class="remind-btn">提醒发货</button>
                  <button v-if="order.status === '待收货'" class="confirm-btn">确认收货</button>
                  <button v-if="order.status === '已完成'" class="review-btn">评价</button>
                  <button class="view-order-btn">查看详情</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 互动社区 -->
        <div v-if="activeTab === 'community'" class="community-section">
          <h2>互动社区</h2>
          
          <div class="community-categories">
            <div class="community-card" @click="navigateToCommunity('forums')">
              <div class="community-icon">
                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 11.5C21 16.75 16.75 21 11.5 21H4.5C3.39543 21 2.5 20.1046 2.5 19V5C2.5 3.89543 3.39543 3 4.5 3H16.5L21 7.5V11.5Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 9H16" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 13H16" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 17H13" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <h3>宠物论坛</h3>
              <p>分享养宠经验，解答疑问，结交宠友</p>
            </div>
            
            <div class="community-card" @click="navigateToCommunity('events')">
              <div class="community-icon">
                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 2V5" stroke="currentColor" stroke-width="2"/>
                  <path d="M16 2V5" stroke="currentColor" stroke-width="2"/>
                  <path d="M3.5 9.08008V19.5C3.5 20.3284 4.17157 21 4.99999 21H19C19.8284 21 20.5 20.3284 20.5 19.5V9.08008C20.5 8.67008 20.2642 8.28353 19.8578 8.06689L13.8578 4.56689C13.404 4.32189 12.8563 4.34487 12.4162 4.62723C11.9761 4.90958 11.6748 5.33824 11.6 5.82008L10 12.8201L13 14.8201L16 12.8201L14 10.8201L8.14213 14.3236C7.73578 14.5402 7.5 14.9268 7.5 15.3368V19.5C7.5 19.7761 7.61 20.0391 7.80711 20.2361C8.00421 20.4331 8.26716 20.543 8.54213 20.543C8.8171 20.543 9.08004 20.4331 9.27714 20.2361C9.47424 20.0391 9.5831 19.7761 9.5831 19.5V15.6837" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <h3>宠物活动</h3>
              <p>参与线下宠物聚会、训练课程和比赛活动</p>
            </div>
            
            <div class="community-card" @click="navigateToCommunity('gallery')">
              <div class="community-icon">
                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M8.5 10.5C9.05228 10.5 9.5 10.0523 9.5 9.5C9.5 8.94772 9.05228 8.5 8.5 8.5C7.94772 8.5 7.5 8.94772 7.5 9.5C7.5 10.0523 7.94772 10.5 8.5 10.5Z" fill="currentColor"/>
                  <path d="M16 10C17.6569 10 19 8.65685 19 7C19 5.34315 17.6569 4 16 4C14.3431 4 13 5.34315 13 7C13 8.65685 14.3431 10 16 10Z" fill="currentColor"/>
                  <path d="M12.5 18.5C12.5 17.3954 13.3954 16.5 14.5 16.5H17.5C18.6046 16.5 19.5 17.3954 19.5 18.5V19.5C19.5 20.6046 18.6046 21.5 17.5 21.5H14.5C13.3954 21.5 12.5 20.6046 12.5 19.5V18.5Z" fill="currentColor"/>
                </svg>
              </div>
              <h3>宠物相册</h3>
              <p>上传和分享你的宠物美照，记录美好瞬间</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const userName = ref('宠物爱好者')
const userAvatar = ref('https://picsum.photos/id/64/200/200')
const isVip = ref(true)
const memberLevel = ref('铂金会员')
const membershipExpiry = ref('2024-12-31')
const petsCount = ref(3)
const favoriteCount = ref(12)
const points = ref(2800)

// 导航标签
const tabs = [
  { id: 'benefits', name: '会员权益' },
  { id: 'favorites', name: '个人收藏' },
  { id: 'orders', name: '订单记录' },
  { id: 'community', name: '互动社区' }
]
const activeTab = ref('benefits')

// 个人收藏数据
const favorites = ref([
  {
    id: 1,
    name: '金毛寻回犬',
    type: 'breed',
    image: '@/assets/pixel-pets.png',
    description: '友好、可靠、值得信赖的犬种'
  },
  {
    id: 2,
    name: '布偶猫',
    type: 'breed',
    image: '@/assets/pixel-cats.png',
    description: '温顺、安静、亲人的猫种'
  },
  {
    id: 3,
    name: '猫咪饲养指南',
    type: 'guide',
    image: '@/assets/1.png',
    description: '从幼猫到成年猫的全面护理知识'
  },
  {
    id: 4,
    name: '狗狗训练技巧',
    type: 'guide',
    image: '@/assets/2.png',
    description: '基础服从训练到高级技能培养'
  }
])

// 订单数据
const orders = ref([
  {
    id: '20231015001',
    date: '2023-10-15',
    status: '已完成',
    totalItems: 2,
    totalPrice: 298.00,
    items: [
      {
        id: 1,
        name: '优质猫粮 5kg',
        price: 198.00,
        quantity: 1,
        image: '@/assets/1.png'
      },
      {
        id: 2,
        name: '猫咪玩具套装',
        price: 100.00,
        quantity: 1,
        image: '@/assets/pixel-cats.png'
      }
    ]
  },
  {
    id: '20230928002',
    date: '2023-09-28',
    status: '待收货',
    totalItems: 1,
    totalPrice: 358.00,
    items: [
      {
        id: 3,
        name: '狗狗牵引绳套装',
        price: 358.00,
        quantity: 1,
        image: '@/assets/pixel-pets.png'
      }
    ]
  },
  {
    id: '20230915001',
    date: '2023-09-15',
    status: '已完成',
    totalItems: 3,
    totalPrice: 499.00,
    items: [
      {
        id: 4,
        name: '宠物窝垫',
        price: 199.00,
        quantity: 1,
        image: '@/assets/Hero.png'
      },
      {
        id: 5,
        name: '宠物零食大礼包',
        price: 150.00,
        quantity: 2,
        image: '@/assets/3.png'
      }
    ]
  }
])

// 订单筛选
const orderFilters = [
  { id: 'all', name: '全部订单' },
  { id: 'pending', name: '待付款' },
  { id: 'shipping', name: '待发货' },
  { id: 'delivered', name: '待收货' },
  { id: 'completed', name: '已完成' }
]
const activeOrderFilter = ref('all')

// 筛选后的订单
const filteredOrders = computed(() => {
  if (activeOrderFilter.value === 'all') {
    return orders.value
  }
  
  const statusMap = {
    'pending': '待付款',
    'shipping': '待发货',
    'delivered': '待收货',
    'completed': '已完成'
  }
  
  return orders.value.filter(order => order.status === statusMap[activeOrderFilter.value])
})

// 移除收藏
const removeFavorite = (id) => {
  favorites.value = favorites.value.filter(fav => fav.id !== id)
  favoriteCount.value = favorites.value.length
  // 这里可以添加API调用逻辑
}

// 查看收藏详情
const viewFavoriteDetail = (id, type) => {
  if (type === 'breed') {
    router.push(`/breed/${id}`)
  } else if (type === 'guide') {
    // 这里可以添加跳转到指南详情的逻辑
    console.log('查看指南详情:', id)
  }
}

// 导航到社区对应功能
const navigateToCommunity = (type) => {
  // 这里可以添加跳转到具体社区功能的逻辑
  console.log('导航到社区:', type)
  // 例如：router.push(`/community/${type}`)
}
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --secondary-color: #4CAF50;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.member-center-page {
  min-height: 100vh;
  background-color: var(--background-light);
}

/* 会员中心头部 */
.member-header {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.header-bg {
  position: relative;
  height: 400px;
  width: 100%;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}

/* 会员信息 */
.member-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px;
  display: flex;
  align-items: flex-end;
  gap: 30px;
}

.member-avatar {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--white);
  box-shadow: var(--shadow);
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vip-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--white);
}

.vip-text {
  font-weight: 700;
  font-size: 12px;
  color: #8b4513;
}

.member-details {
  flex: 1;
  color: var(--white);
}

.member-details h1 {
  font-size: 32px;
  margin: 0 0 10px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.member-level,
.membership-status {
  font-size: 16px;
  margin-bottom: 8px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.level-value {
  font-weight: 600;
  color: #ffd700;
}

/* 会员统计 */
.member-stats {
  display: flex;
  gap: 40px;
  align-items: center;
}

.stat-item {
  text-align: center;
  color: var(--white);
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.stat-label {
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 导航标签 */
.member-nav {
  background-color: var(--white);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.nav-tab {
  padding: 20px 30px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.nav-tab:hover {
  color: var(--primary-color);
}

.nav-tab.active {
  color: var(--primary-color);
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 3px;
  background-color: var(--primary-color);
}

/* 主要内容区域 */
.member-content {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.content-container {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}

/* 各部分标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2,
.benefits-section h2,
.favorites-section h2,
.orders-section h2,
.community-section h2 {
  font-size: 24px;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

.collection-count {
  color: var(--text-secondary);
  font-size: 14px;
}

/* 会员权益 */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: var(--radius);
  transition: var(--transition);
}

.benefit-card:hover {
  background-color: rgba(255, 127, 0, 0.05);
  transform: translateY(-2px);
}

.benefit-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 127, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.benefit-info h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.benefit-info p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* 个人收藏 */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.favorite-card {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

.favorite-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.favorite-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.favorite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.favorite-card:hover .favorite-image img {
  transform: scale(1.05);
}

.remove-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-secondary);
}

.remove-favorite:hover {
  background-color: var(--white);
  color: #ff4757;
}

.favorite-info {
  padding: 16px;
}

.favorite-info h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.favorite-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.view-detail {
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.view-detail:hover {
  background-color: var(--primary-hover);
}

/* 订单筛选 */
.order-filters {
  display: flex;
  gap: 12px;
}

.filter-btn {
  padding: 6px 16px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.filter-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

/* 订单列表 */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}

.order-card:hover {
  box-shadow: var(--shadow);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.order-info {
  display: flex;
  gap: 20px;
}

.order-number,
.order-date {
  font-size: 14px;
  color: var(--text-secondary);
}

.order-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.order-status.待付款 {
  background-color: #ffedb3;
  color: #ff9800;
}

.order-status.待发货 {
  background-color: #e3f2fd;
  color: #2196f3;
}

.order-status.待收货 {
  background-color: #e8f5e9;
  color: #4caf50;
}

.order-status.已完成 {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.order-items {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.order-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.item-info h4 {
  margin: 0 0 4px 0;
  color: var(--text-primary);
  font-size: 16px;
}

.item-price {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 12px;
}

.item-quantity {
  color: var(--text-secondary);
  font-size: 14px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.order-total {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.order-actions {
  display: flex;
  gap: 8px;
}

.pay-btn,
.remind-btn,
.confirm-btn,
.review-btn,
.view-order-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.pay-btn {
  background-color: var(--primary-color);
  color: var(--white);
}

.pay-btn:hover {
  background-color: var(--primary-hover);
}

.remind-btn,
.review-btn {
  background-color: #f0f0f0;
  color: var(--text-primary);
}

.remind-btn:hover,
.review-btn:hover {
  background-color: #e0e0e0;
}

.confirm-btn {
  background-color: var(--secondary-color);
  color: var(--white);
}

.confirm-btn:hover {
  background-color: #45a049;
}

.view-order-btn {
  background-color: #f0f0f0;
  color: var(--text-primary);
}

.view-order-btn:hover {
  background-color: #e0e0e0;
}

/* 互动社区 */
.community-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.community-card {
  text-align: center;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.community-card:hover {
  background-color: rgba(255, 127, 0, 0.05);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.community-icon {
  margin: 0 auto 20px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.community-card h3 {
  font-size: 20px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.community-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .member-info {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
  }
  
  .member-stats {
    width: 100%;
    justify-content: space-around;
  }
  
  .benefits-grid,
  .favorites-grid,
  .community-categories {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-bg {
    height: 300px;
  }
  
  .member-info {
    padding: 20px;
  }
  
  .member-avatar {
    width: 120px;
    height: 120px;
  }
  
  .member-details h1 {
    font-size: 24px;
  }
  
  .nav-tab {
    padding: 16px 20px;
    font-size: 14px;
  }
  
  .content-container {
    padding: 20px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .order-filters {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .order-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .order-items {
    flex-direction: column;
  }
  
  .order-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .order-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .member-info {
    padding: 15px;
  }
  
  .member-stats {
    gap: 20px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .nav-container {
    padding: 0;
  }
  
  .nav-tab {
    padding: 16px 12px;
    font-size: 12px;
  }
  
  .benefits-grid,
  .favorites-grid,
  .community-categories {
    grid-template-columns: 1fr;
  }
  
  .order-actions {
    flex-wrap: wrap;
  }
  
  .pay-btn,
  .remind-btn,
  .confirm-btn,
  .review-btn,
  .view-order-btn {
    flex: 1;
    min-width: 120px;
  }
}
</style>